<template>
	<div class="bg-white">

		<div class="shadow rounded overflow-hidden">
			<div class="bg-main p-2">
				<span>会员信息</span>
			</div>
			<div :style="" class="position-relative">
				<div style="background-color: rgba(255,255,255, 0.6);" class="w-100 h-100">
					<Row class="">
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
							<div class="text-xs">会员编号</div>
							<div>{{hyjl.hyjlid}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
							<div class="text-xs">会员类型</div>
							<div>{{hylx.hlname}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
							<div class="text-xs">教练姓名</div>
							<div>{{jl.jlname}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
							<div class="text-xs">客户昵称</div>
							<div>{{client.nc}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded text-xs p-2">
							<div class="text-xs">购买日期</div>
							<div>{{hyjl.cd}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded text-xs p-2">
							<div class="text-xs">结束日期</div>
							<div>{{hyjl.ed}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded text-xs p-2">
							<div class="text-xs">生效日期</div>
							<div>{{hyjl.sd}}</div>
						</div>
						</Col>


						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-danfen rounded p-2 d-flex justify-content-between">
							<div class="text-xs">支付状态</div>
							<div v-if="hyjl.pflg == '0'">未支付</div>
							<div v-if="hyjl.pflg == '1'">已支付</div>

						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-danfen rounded p-2 d-flex justify-content-between">
							<div class="text-xs">退款状态</div>
							<div v-if="hyjl.tkflg == 'U'">未退款</div>
							<div v-if="hyjl.tkflg == 'R'">已申请</div>
							<div v-if="hyjl.tkflg == 'J'">已退还</div>

						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-danfen rounded p-2 d-flex justify-content-between">
							<div class="text-xs">生效状态</div>
							<div v-if="hyjl.tkflg == 'U'">未开始</div>
							<div v-if="hyjl.tkflg == 'R'">已生效</div>
							<div v-if="hyjl.tkflg == 'F'">已结束</div>

						</div>
						</Col>
					</Row>
				</div>
			</div>
		</div>

		<!-- </div>
	</Col>
	</Row>
	</div>
	</div> -->


	</div>
</template>

<script>
	export default {
		data() {
			return {
				hyjl: {},
				client: {},
				hylx: {},
				jl: {},

			}
		},
		created: function() {
			this.hyjl.hyjlid = this.$route.query.id;
			console.log('created 钩子中 hyjlid 的值:', this.hyjl.hyjlid);
			this.loadData();
		},
		mounted: function() {},

		methods: {
			loadData: function() {
				return this.http.get({
					url: "/client/hyjl/info",
					param: {
						hyjlid: this.hyjl.hyjlid
					}
				}).then(res => {
					this.hyjl = res.ahyjl;
					this.client = res.client;
					this.hylx = res.ahylx;
					this.jl = res.ajiaolian;
				});
			},

		},
	}
</script>

<style>
</style>